import { useState } from "react";
import Histogram from "./Histogram";

const HistogramContainer = () => {
  const [metric, setMetric] = useState("windSpeed");
  const [index, setIndex] = useState(0);
  const metrics = [
    "windSpeed",
    "moonPhase",
    "dewPoint",
    "humidity",
    "uvIndex",
    "windBearing",
    "temperatureMin",
    "temperatureMax",
  ];

  return (
    <div style={{ display: "flex", alignItems: "center" }}>
      <Histogram metric={metric}></Histogram>
      <button
        onClick={() => {
          setIndex(index + 1);
          setMetric(metrics[index % 8]);
        }}
        style={{ backgroundColor: "yellow" }}
      >
        Change metric
      </button>
    </div>
  );
};

export default HistogramContainer;
